<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jquery发送http请求</title>
</head>
<body>
	<div class="container"></div>
</body>
<script src="./libs/15.4.2/react.min.js"></script>
<script src="./libs/15.4.2/react-dom.min.js"></script>
<script src="./libs/15.4.2/babel.min.js"></script>
<script src="./libs/jquery.min.js"></script>
<link rel="stylesheet" href="./libs/bootstrap.css"/>
<script type="text/babel">
/*
	注意：react核心包中并没有提供发送http请求的功能，所以发送http请求需要我们自己去选择第三方的js库
	常见的http工具包:axios、superagent、jquery(如果只是发送http请求，不建议选择，jquery的核心是dom操作)
*/
var CarList = React.createClass({
  

  getInitialState: function() {
  	//注意：此处如果不初始化list为空数组，有可能渲染的时候会报错
    return {
     	list:[]		
    };
  },
	
  componentWillmount:function(){
  	console.log('即将渲染');
  },	
  	
  componentDidMount: function() {
  	console.log('已经渲染');
    this.serverRequest = $.get(this.props.source, function (result) {
      var list = result['data'];
      this.setState({
        list:list,
      });
    }.bind(this));	
  },

  componentWillUpdate:function(){
	console.log('页面state即将更新');
  },
  componentDidUpdate:function(){
	console.log('页面state已经更新');
  },	
	
  componentWillUnmount: function() {
  	console.log('即将卸载');
  	//取消未完成请求
    this.serverRequest.abort();
  },

  componentDidUnMount:function(){
  	console.log('已经卸载');
  },
 
  render:function() {
    return (
    	<div>
        <ul className="list-group">
		{this.state.list.map(function(item){
			return <li className="list-group-item">{item.brand}
					---{item.country}
					<span className="badge">&yen;{item.price}</span>
			</li>
		})}
        </ul>
      </div>
      )
  }


});
ReactDOM.render(
  <CarList source="/data.json" />,
  document.querySelector('.container')
);

</script>
</html>